<template>
  <div id="app">
    <SlotTest>
      <template slot="footer">
        <span >hello world</span>
      </template>
    </SlotTest>
  </div>
</template>

<script>
  import MissionProcess from './components/MissionProcess';
  import PageLayer from './components/PageLayer';
  import SlotTest from './components/SlotTest';

  export default {
    name: 'App',
    data: function () {
      return {
        radio: '1',
        imgList:[
          {
            url:require('../static/img/111.png')
          },
          {
            url:require('./assets/logo.png')
          },
          {
            url:require('../static/img/111.png')
          },
          {
            url:require('./assets/logo.png')
          }
        ]
      };
    },
    components:{
      MissionProcess,
      PageLayer,
      SlotTest
    },
    methods: {
      showMessage() {
        console.log("label: " + this.radio);
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    /*margin-top: 60px;*/
    width: 1080px;
    margin: 0 auto;
  }

  .grid-content {
    border: 1px salmon solid;
    height: 30px;
    margin: 5px 5px;
  }

  .primary {
    height: 100%;
    /*display: block;*/
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
</style>
